<template>
    <el-button class="button"
        :class="[link && disabled ? 'text-disabled' : link && !disabled ? 'text-'+type : !link && disabled ? 'disabled' : !link && !disabled ? type : '']"
        :loading="loading" :disabled="disabled">
        <slot></slot>
    </el-button>
</template>
<script setup>
const props = defineProps({
    type: { // primary, assistant, disabled, info
        type: String,
        default: 'primary'
    },
    link: {
        type: Boolean,
        default: false
    },
    loading: {
        type: Boolean,
        default: false
    },
    disabled: {
        type: Boolean,
        default: false
    },
})
</script>
<style lang="scss" scoped>
.button {
    height: 32px;
    padding: 8px 15px;
    border-radius: 4px;
    border: 0;
    &.primary {
        background-color: var(--el-color-primary);
        color: #fff;
    }
    &.text-primary {
        color: var(--el-color-primary);
        background-color: transparent;
    }

    &.assistant {
        background-color: #4DC170;
        color: #fff;
    }
    &.text-assistant {
        color: #4DC170;
        background-color: transparent;
    }

    &.disabled {
        background: $auxiliary-color;
        color: #fff;
    }
    &.text-disabled {
        color: $auxiliary-color;
        background-color: transparent;
    }

    &.info {
        background: #f5f5f5;
        color: $auxiliary-color;
        border: 1px solid #d8d8d8;
    }
    &.text-info {
        color: #f5f5f5;
        background-color: transparent;
    }

}
</style>